<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <meta name="format-detection" content="telephone=yes" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script src="./js/jq.js"></script>
    <title>换电进度</title>
    <link rel="stylesheet" href="css/pro_gress.css?id=4">
</head>

<body>
    <div class="contain">
        <div class="head">
            <img src="./img/head1.png" alt="">
            <div class="head-content">
                <h3>您的专属客户经理</h3>
                <span class="name"></span><a href="" class="tel"></a><span>(一键拨号)</span>
            </div>
        </div>
        <div class="content">
            <div class="content-left">
                <div class="circle-third">3</div>
                <div class="line-third"></div>
                <div class="circle-second">2</div>
                <div class="line-second"></div>
                <div class="circle-first">1</div>
            </div>
            <div class="content-right">
                <div class="third">
                    <p class="third-text">换电已完成</p>
                    <p class="third-time"></p>
                </div>
                <div class="second">
                    <p class="second-text">尾款已经支付</p>
                    <p class="second-time"></p>
                </div>
                <div class="first">
                    <p class="first-text">成功支付定金</p>
                    <p class="first-time"></p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(() => {
        let u = navigator.userAgent;
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;

        let params = window.location.search.split('=')[1]
        //获取年份
        var d = new Date();
        var y = d.getFullYear() + '-xx-xx';
        //初始化日期
        $('.first-time').html(y)
        $('.second-time').html(y)
        $('.third-time').html(y)
        $.ajax({
            type: 'POST',
            url: 'https://api.cd1a.cn/index.php/activity/swap4/progress',
            data: {
                battery_id: params
            },
            dataType: 'json',
            success: function (res) {
                console.log(res)
                if (res.data.maintenance.name != '' && res.data.maintenance.tel != '') {
                    $('.name').html(res.data.maintenance.name)
                    $('.tel').html(res.data.maintenance.tel)
                    $('.tel').attr('href', 'tel:'+res.data.maintenance.tel)
                    $('.tel').click(() => {
                        //Android
                        if (isAndroid) {
                            window.TiantianCharge_Android.call(res.data.maintenance.tel)
                            return
                        }
                        //IOS
                        if (isiOS) {
                            window.webkit.messageHandlers.call.postMessage(res.data.maintenance.tel)
                            return
                        }
                    })
                } else {
                    $('.tel').attr('href', 'tel:4006888919')
                    $('.tel').html(4006888919)
                    $('.tel').click(() => {
                        //Android
                        if (isAndroid) {
                            window.TiantianCharge_Android.call(4006888919)
                            return
                        }
                        //IOS
                        if (isiOS) {
                            window.webkit.messageHandlers.call.postMessage(4006888919)
                            return
                        }
                    })
                }
                if (res.data.a) {
                    $('.first-text').html(res.data.a.desc)
                    $('.first-time').html(res.data.a.time)
                    $('.first-text').css('color', '#FE7902')
                    $('.circle-first').css('background', '#FE7902')
                }
                if (res.data.b) {
                    $('.second-text').html(res.data.b.desc)
                    $('.second-time').html(res.data.b.time)
                    $('.second-text').css('color', '#FE7902')
                    $('.circle-second').css('background', '#FE7902')
                    $('.line-second').css('background', '#FE7902')
                }
                if (res.data.c) {
                    $('.third-text').html(res.data.c.desc)
                    $('.third-time').html(res.data.c.time)
                    $('.third-text').css('color', '#FE7902')
                    $('.circle-third').css('background', '#FE7902')
                    $('.line-third').css('background', '#FE7902')
                }
            }
        })
    })
</script>

</html>